<template>
  <div class="mine-edit">
    <!-- 1.导航栏 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.go(-1)" />
    <!-- 头2.像区域 -->
    <div class="avatar">
      <van-image
        fit="cover"
        round
        :src="$store.state.userInfo.photo"
      ></van-image>
      <!-- after-read是一个回调函数，当`选择完文件后` 调用，参数content： base64 编码 ,file:图片对象 -->
      <van-uploader :after-read="afterRead" />
    </div>
    <!-- 3.资料cell区域 -->
    <!-- <van-cell title="单元格" is-link :value="userInfo.name" />
    <van-cell title="单元格" is-link :value="userInfo.name" />
    <van-cell title="单元格" is-link :value="userInfo.name" /> -->
    <van-cell
      title="名称"
      :value="userInfo.name"
      is-link
      @click="showNameDialog"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender ? '男' : '女'"
      is-link
      @click="popShow = true"
    />
    <van-cell
      @click="showBirth"
      title="生日"
      :value="userInfo.birthday"
      is-link
    />

    <!-- v-model控制显示和隐藏的 -->
    <van-dialog
      v-model="dialogShow"
      title="修改名称"
      show-cancel-button
      class="diglog-name"
      @confirm="changname"
    >
      <!-- 输入框 -->
      <van-field v-model="editname" ref="nameinp" />
    </van-dialog>

    <!-- 5. 弹出层 -- 修改性别 -->
    <van-popup v-model="popShow" position="bottom" :style="{ height: '16%' }">
      <van-nav-bar
        title="修改性别"
        left-text="取消"
        @click-left="popShow = false"
      />
      <van-cell @click="changeSex(1)" title="男" is-link />
      <van-cell @click="changeSex(0)" title="女" is-link />
    </van-popup>
    <!-- 5. 弹出层 -- 修改生日-->
    <van-popup v-model="birthShow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="changeBirthday"
        @cancel="birthShow = false"
      />
    </van-popup>

    <!-- 上传 头像 容器 -->
    <div class="crop-wrap" v-show="cropShow">
      <vueCropper
        ref="cropper"
        :img="cropImg"
        autoCrop
        autoCropWidth="150"
        autoCropHeight="150"
      ></vueCropper>
      <van-button @click="doCrop" type="primary">裁剪</van-button>
      <van-button @click="cropShow = false" type="primary">取消</van-button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";

import { editProfileAPI, editAvatarAPI } from "@/api"; //编辑用户个人信息接口 // 编辑图片
import moment from "moment"; // 转换时间格式
export default {
  data() {
    return {
      dialogShow: false, //改名字的框显示
      editname: "", //用户名字
      popShow: false, // 性别显示

      // 控制时间选择的显示和隐藏
      birthShow: false,
      // 用来获取它选择的时间，或者用来设置默认显示的时间
      currentDate: new Date(),
      // 设置最小能设置的日期
      minDate: new Date("1949-10-01"),
      // 设置最大能设置的日期
      maxDate: new Date(),

      cropShow: false, // 显示上传背景底
      cropImg: "", // 装裁剪图片的变量
    };
  },
  components: {
    VueCropper, // 裁剪工具
  },
  // 解决网址进入edit页面报错（没有获取用户信息）
  computed: {
    //用户编辑随改随变
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  // async created() {
  //   if (!this.$store.state.userInfo.name) {
  //     // 发请求获取用户信息
  //     let res = await userInfoAPI();
  //     console.log(res);
  //     this.info = res.data.data; //渲染页面的info
  //     console.log(res.data.data);
  //     this.$store.commit("setUserInfo", res.data.data); //保存到vuex里
  //   }
  // },
  created() {
    this.$store.dispatch("reqUserInfo");
  },
  methods: {
    // 6. 点击裁剪触发
    doCrop() {
      // 要不要拿到框选后裁剪的结果
      // vueCropper的getCropBlob方法
      this.$refs.cropper.getCropBlob(async (data) => {
        // console.log(data);
        let fm = new FormData(); // 空的 // 所有Form信息
        // 添加内容,参数1：key 参数2：值
        fm.append("photo", data); // 将图片信息传入

        let res = await editAvatarAPI(fm); // 编辑完图片
        this.cropShow = false;
        // 把上传后的图片最新地址传递到vuex
        this.$store.commit("setUserInfo", {
          // 图片传到vuex实时更新
          ...this.$store.state.userInfo,
          photo: res.data.data.photo,
        });
        this.$toast.success("修改成功！");
      });
    },
    // 5. 文件上传选择完文件后触发的函数
    afterRead(file) {
      // file里包含了当前选择的文件信息
      // content属性有选择的图片对应的base64编码
      // console.log("选择完文件了", file.content);
      // file属性就有这张文件对象
      // console.log("选择完文件了", file.file);
      this.cropShow = true; // 显示上传
      // 把选择的文件赋值给裁剪插件
      this.cropImg = file.content;
    },
    // 弹框选中的生日
    async changeBirthday() {
      // 注意：这里接口要求的数据是字符串，而我们拿到的时间是Date类型
      // 不匹配，需要转
      const birthday = moment(this.currentDate).format("YYYY-MM-DD");

      // 发请求
      await editProfileAPI({
        birthday,
      });
      // 请求成功修改vuex
      this.$store.commit("setUserInfo", {
        // 要保留原来的数据，只单独修改name
        ...this.$store.state.userInfo,
        birthday,
      });

      // 隐藏生日选择器
      this.birthShow = false;
    },
    // 4.1 生日cell点击事件 - 显示生日选择器
    showBirth() {
      // 把自己的生日赋值给时间选择
      this.currentDate = new Date(this.userInfo.birthday);
      // 显示时间选择器
      this.birthShow = true;
    },
    // 点击的性别选择
    async changeSex(gender) {
      // 假如性别没变则没必要执行下去了
      if (gender == this.userInfo.gender) {
        this.popShow = false;
        return;
      }
      // 发请求去修改
      await editProfileAPI({
        gender,
      });
      // 将vuex的数据改变，界面才会变
      this.$store.commit("setUserInfo", {
        ...this.$store.state.userInfo,
        gender,
      });
      // 隐藏弹出层
      this.popShow = false;
    },
    //个人用户信息编辑之点击修改名字
    showNameDialog() {
      this.dialogShow = true;
      this.editname = this.userInfo.name;

      //Vue组件用的是懒加载，默认是隐藏的，vue就没有去渲染它，因为渲染Dom是异步代码，需要上面的代码执行完了才开始渲染，所以this.$refs找不到input就显示undefined,解决方法：要用一个$nextTick
      //加焦点
      this.$nextTick(() => {
        // 等Dom渲染完毕，再去找到input，再让它获得焦点
        console.log("this.$refs.nameinp:", this.$refs.nameinp); //undefined 找不到输入框，未渲染好
        this.$refs.nameinp.focus();
      });
    },

    //编辑个人信息之修改名字
    async changname() {
      //发(instance)请求，修改名字
      let res = await editProfileAPI({
        name: this.editname,
      });
      console.log(res); //显示axios修改成功，但是vuex里没有修改，所以下面开始修改(不能直接通过state修改，用里面的方法库修改)
      this.$store.commit("setUserInfo", {
        // 利用vuex保存的旧信息加上要修改的某一项信息就可以改了,组成一个新对象
        ...this.$store.state.userInfo,
        name: this.editname, //只穿过去一个name页面部分地方会显示空白，因为没传其他值会undefined
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mine-edit {
  .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    position: relative; // 加了定位才能点到上传图片灰色底
    .van-image {
      width: 100px;
      height: 100px;
    }
    .van-uploader {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      ::v-deep {
        .van-uploader__wrapper {
          width: 100%;
          height: 100%;

          .van-uploader__upload {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .diglog-name {
    .van-field {
      border: 1px solid gold;
    }
  }
  // 上传容器
  .crop-wrap {
    // 铺满整个屏幕
    // vw: viewport width 视口宽度
    // vh：viewport height 视口高度
    // 把视口宽度和高度各自分成100份，写100代表铺满
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #858c92;

    // 裁剪按钮
    .van-button {
      position: fixed;
      bottom: 0;
      left: 0;

      &:nth-of-type(2) {
        // 要把left给恢复成默认值
        left: auto;
        right: 0;
      }
    }
  }
}
</style>
